<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>忘记密码</title>
    <style type="text/css">
    	html{
    		height: 100vh;
    	}
    	body{
    		width: 100%;
    		height: 100%;
    		overflow: hidden;
    		background: url(img/login-bg.png) no-repeat center center fixed;
    		background-size: 100% 100%;
    	}
    	#com-tit{
    		position: fixed;
    		top: 0;
    		right: 0;
    		left: 0;
    		padding: 30px 20px 0;
    		font-size: 20px;
    		color: white;
    	}
    	.content{
    		position: fixed;
    		top: 60px;
    		right: 0;
    		left: 0;
    		bottom: 0;
    		overflow: auto;
    	}
    	#com-tit>.cont{
    		width: 60px;
    		height: 30px;
    	}
    	.logo{
    		margin-top: 8vh;
    	}
    	.logo>img{
    		width: 110px;
    		height: auto;
    	}
    	.input-wrap{
    		margin-top:6vh ;
    		padding: 0 40px;
    	}
    	.input{
    		margin-top: 3vh;
    		background: #06476D;
    		border: 1px solid #1E5673;
    		border-radius: 6px;
    	}
    	.input>img{
    		margin-left: 15px;
    		margin-right: 15px;
    		width: 30px;
    		height: 30px;
    	}
    	.input>div{
    		padding:8px 18px;
    		border-left: 1px solid #1E5673;
    	}
    	
    	.input>div>input{
    		height: 20px;
    		line-height: 20px;
    		padding: 10px 0 ;
    		font-size: 16px;
    		color: white;
    		background: transparent;
    	}
    	.input>div>input::-webkit-input-placeholder{
    		font-size: 16px;
    		color: rgba(231, 231, 230, .5);
    	}
    	.send-code>img{
    		flex: 0 0 30px;
    	}
    	.send-code>.input-info{
    		flex: 1 1 0;
    		overflow: hidden;
    	}
    	.send-code>span{
    		flex: 0 0 50px;
    		text-align: center;
    		font-size: 15px;
    		color: white;
    	}
    	.send-code>.input-info>input{
    		width: 100%;
    	}
    	.ser{
    		padding-top: 2vh;
    		font-size: 15px;
    		color: rgba(231, 231, 230, .5);
    	}
    	.ser>input{
    		margin-right: 5px;
    	}
    	.ser>span:last-of-type{
    		color: white;
    	}
    	.btn-wrap{
    		padding:0 40px 40px;
    	}
    	.btn-wrap>p{
    		width: 100%;
			padding: 16px 0;
    		border-radius: 6px;
    		background: #6691B3;
			font-size: 18px;
			text-align: center;
    		color: white;
    	}
    	
    </style>
</head>

<body>
    <div id='app'>

         <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->
        
        <div id="com-tit" class='dis-spa'>
        	<p class='cont dis-start' @tap="_close();"><img src="img/back-white.svg"/ style="width: 20px;height: 20px;"></p>
        	<p>忘记密码</p>
        	<p class='cont' style="opacity: 0;"><img src="img/back-white.svg"/ style="width: 20px;height: 20px;"></p>
        </div>
        
        <div class="content">
        	<div class="logo dis-cen">
				<img src="img/ai-log.png"/>
			</div>
			
			<div class="input-wrap">
				<div class="input dis-start">
					<img src="img/user-icon.svg"/>
					<div class='input-info'>
						<input type="text" placeholder="输入您的手机号" v-model='forget.account'/>
					</div>
				</div>
				
				<div class="input dis-start send-code">
					<img src="img/yan-icon.svg"/>
					<div class='input-info'>
						<input type="text" placeholder="输入验证码" v-model='forget.code'/>
					</div>
					<span v-text='codeFont' @tap='sendCode'>发送</span>
				</div>
				
				<div class="input dis-start">
					<img src="img/pas-icon.svg"/>
					<div class='input-info'>
						<input type="password" placeholder="输入您新的登录密码" v-model='forget.password'/>
					</div>
				</div>
				
				<div class="input dis-start">
					<img src="img/pas-icon.svg"/>
					<div class='input-info'>
						<input type="password" placeholder="再次输入您的登录密码" v-model='surePas'/>
					</div>
				</div>
				
			</div>
			
			<div class="btn-wrap">
				<p style="margin-top: 30px;" @tap="forSub">提交</p>
			</div>
        </div>

		
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                forget:{
                	account:'',
					password:'',
					code:''
                },
                //第二次密码
                surePas:'',
                //判断发送验证码没得
                offSend:true,
                //验证码字体
                codeFont:'发送'
            },
            methods: {
            	//忘记密码提交资料
				forSub:function(){
					if(!_checkMobile(this.forget.account)){
						_toast('请输入正确的手机号');
						return;
					}
					if(!this.forget.password){
						_toast('请输入新登录密码');
						return;
					}
					if(this.surePas!=this.forget.password){
						_toast('两次登录密码输入不一致');
						return;
					}
					if(this.offSend){
						_toast('请发送验证码');
						return;
					}
					if(!this.forget.code){
						_toast('请输入你收到的验证码');
						return;
					}
					var This=this;
            		This.jiazai=true;
            		HTTP.post(FORGETPAS,this.forget,function(data){
            			This.jiazai=false;
						if(String(data.status)=='1'){
							_toast('找回密码成功，请牢记新密码');
							setTimeout(function(){
								_close();
							},1500);
						}else{
							_toast(data.msg);
						}
					});
				},
				//发送验证码
				sendCode:function(){
					if(this.codeFont!='发送'){
            			return;
            		}
            		if(!_checkMobile(this.forget.account)){
						_toast('请输入正确的手机号');
						return;
					}
            		var This=this;
            		This.jiazai=true;
            		This.offSend=false;
            		HTTP.post(SENDCODE,{
            			account:this.forget.account
            		},function(data){
            			This.jiazai=false;
						if(String(data.status)=='1'){
							var s=60;
							var time=setInterval(function(){
								if(s<=0){
									clearInterval(time);
									This.codeFont='发送';
								}else{
									This.codeFont= s-- + 's';
								}
							},1000);
						}else{
							_toast(data.msg);
						}
					});
				}
            }
        });
       
    </script>
</body>

</html>